<template>
	<view class="content">
        <input class="uni-input" v-model="input" @focus="isShow = true" placeholder="请输入您的车牌号" />
		<view v-if="isShow" class="vehicle-panel" style="height:430rpx;background-color:#fff;">
        <!--省份简写键盘-->
        <block v-if="keyBoardType === 1">
            <view class="vehicle-panel-row">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:1px solid #ccc;" v-for="(item, idx) in keyVehicle1" @click='addNum(item)' :key="idx">{{item}}</view>
            </view>
            <view class="vehicle-panel-row">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:1px solid #ccc;" v-for="(item, idx) in keyVehicle2" @click='addNum(item)' :key="idx">{{item}}</view>
            </view>
            <view class="vehicle-panel-row">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:1px solid #ccc;" v-for="(item, idx) in keyVehicle3" @click='addNum(item)' :key="idx">{{item}}</view>
            </view>
            <view class="vehicle-panel-row-last">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='addNum(item)' v-for="(item, idx) in keyVehicle4" style="border:1px solid #ccc;" :key="idx">{{item}}</view>
            </view>
        </block>
        <!--英文键盘  -->
        <block v-else>
            <view class="vehicle-panel-row">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-number' @click='addNum(item)' v-for="(item, idx) in keyNumber" style="border:1px solid #ccc;" :key="idx">{{item}}</view>
            </view>
            <view class="vehicle-panel-row">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:1px solid #ccc;" v-for="(item, idx) in keyEnInput1" @click='addNum(item)' :key="idx" >{{item}}</view>
            </view>
            <view class="vehicle-panel-row">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:1px solid #ccc;" v-for="(item, idx) in keyEnInput2" @click='addNum(item)' :key="idx">{{item}}</view>
                <view hover-class="vehicle-hover" style="border:1px solid #ccc;" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img'>
                    <view class='vehicle-en-button-delete' @click='delNum()' mode='aspectFit'>X</view>
                </view>
            </view>
            <view class="vehicle-panel-row-last">
                <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='addNum(item)' style="border:1px solid #ccc;"  v-for="(item, idx) in keyEnInput3" :key="idx">{{item}}</view>
                <view hover-class="vehicle-hover" style="border:1px solid #ccc;" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-ok' @click='submit(item)'>确定</view>
            </view>
        </block>
        </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
            input: '晋', //默认第一个字为晋
			isShow: false,
            backgroundColor: "#fff",
            keyBoardType: 1,
            keyVehicle1: '陕京津沪冀豫云辽',
            keyVehicle2: '黑湘皖鲁新苏浙赣',
            keyVehicle3: '鄂桂甘晋蒙吉闽贵',
            keyVehicle4: '粤川青藏琼宁渝',
            keyNumber: '1234567890',
            keyEnInput1: 'QWERTYUIOP',
            keyEnInput2: 'ASDFGHJKL',
            keyEnInput3: 'ZXCVBNM',
		}
	},
    watch: {
        input(newValue, oldValue) {
            if (newValue.length > 0) {
                this.keyBoardType = 2
            } else {
                this.keyBoardType = 1
            }
            //   // 如果输入框为空，重置为“晋”
            // if (newValue.length === 0) {
            //     this.input = '晋';
            //     this.keyBoardType = 1; // 切换到英文键盘
            // }
            // // 如果输入框长度为 1，确保第一个字符为“晋”
            // else if (newValue.length === 1 && newValue !== '晋') {
            //     this.input = '晋' + newValue;
            // }
            // // 如果输入框长度大于 1，确保第二个字符为字母
            // else if (newValue.length > 1 && !/^[A-Za-z]$/.test(newValue[1])) {
            //     this.input = newValue.slice(0, 1) + newValue.slice(1).replace(/[^A-Za-z]/g, '');
            // }
        }
    },
	onLoad() {
	},
	methods: {
        // 输入一个字符
        addNum (item) {
            // 超出车牌号长度时，不对此次点击做响应
            if (this.input.length > 7) {
                return
            }
            this.input = this.input + item
        },
        // 删除一个字符
        delNum () {
            // 当前车牌号程度为0时不再进行删除
            if (!this.input.length) return
            this.input = this.input.slice(0, -1)
        },
        // 确定车牌
        submit () {
            this.isShow = false
        }
	}
}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
        padding-top: 100px;
	}
    .vehicle-panel {
        width: 100%;
        position: fixed;
        bottom: 0;
        display:flex;
        flex-direction:column;
        justify-content:center;
        z-index: 1000;
    }
    .vehicle-panel-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .vehicle-panel-row-last{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .vehicle-panel-row-button {
        background-color: #fff;
        margin: 5rpx;
        padding: 5rpx;
        width: 80rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        border-radius: 10rpx;
    }
    .vehicle-panel-row-button-number {
        background-color: #eee;
    }
    .vehicle-panel-row-button-last {
        width: 90rpx;
        height: 90rpx;
        line-height: 90rpx;
    }
    .vehicle-hover {
        background-color: #ccc;
    }
    .vehicle-panel-row-button-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .vehicle-en-button-delete {
        width: 55rpx;
        height: 85rpx;
    }
    .vehicle-panel-ok {
        background-color: #0F4BA1;
        color: #fff;
        width: 150rpx;
        height: 80rpx;
    }
</style>
